<template>
    <div id="thIndex_" class="padding">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="ygmc"
                    label="员工名称">
            </el-table-column>
            <el-table-column
                    prop="yggh"
                    label="员工工号">
            </el-table-column>
            <el-table-column
                    prop="zxhm"
                    label="坐席号码">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="300">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)" size="small">配置首页模块</el-button>
                    <el-button type="text" @click="configTarget(scope.row)" size="small">配置目标</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="padding" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="pageSizes"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
        <!--config-->
        <div id="config" style="display: none" class="padding">
            <div v-for="(item,index) in clickRow.config_souye" :key="index">
                <div class="padding">
                    <label  style="width: 220px;float: left">{{item.name}}</label>
                    <el-switch
                            style="display: block;float: left"
                            v-model="item.show"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="显示"
                            inactive-text="隐藏">
                    </el-switch>
                </div>
            </div>
            <div class="padding">
                <el-button type="primary" @click="save()">保存</el-button>
            </div>
        </div>
        <!--target-->
        <div id="target" style="display: none" class="padding">
            <el-form :model="clickRow.config_other.target" status-icon :rules="rules" ref="target" label-width="100px" class="demo-ruleForm">
                <el-form-item label="外呼数" prop="outBoundNumber">
                    <el-input v-model="clickRow.config_other.target.outBoundNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通话时长" prop="outBoundTime">
                    <el-input v-model="clickRow.config_other.target.outBoundTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="签约金额" prop="signedMoney">
                    <el-input  v-model="clickRow.config_other.target.signedMoney" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveTarget('target')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "tjConfig",
        beforeCreate: function () {
            this.$nextTick(function () {
                this.page = 1;
                this.limit = this.pageSizes[0];
                this.searchList(this.limit,this.page);
            });
        },
        data() {
            return {
                tableData: [],
                page: 0,
                count: 0,
                limit: 0,
                pageSizes: [30, 90, 120, 300],
                clickRow:{
                    config_souye:{},
                    config_other:{
                        target:{
                            outBoundNumber:'',
                            outBoundTime:'',
                            signedMoney:''
                        },
                    }
                },//点击的那一行
                rules: {
                    outBoundNumber: [
                        {required: true, message: '请输入外呼电话数目标', trigger: 'change'}
                    ],
                    outBoundTime: [
                        {required: true, message: '请输入外呼通话时长目标', trigger: 'change'}
                    ],
                    signedMoney: [
                        {required: true, message: '请输入签约金额目标', trigger: 'change'}
                    ],
                }
            }
        },
        methods: {
            searchList(limit,page){
                this.$post('basic-information-system-tj/list',{limit:limit,page:page})
                    .then((response) => {
                        if (response.data.code == 1) {
                            this.tableData=response.data.data;
                            this.page = response.data.page;
                            this.count = parseInt(response.data.count);
                        }else{//失败
                        }
                    }).catch((response) => {
                    consoleLog(response)
                });
            },
            handleSizeChange(val) {
                this.searchList(val,this.page);
            },
            handleCurrentChange(val) {
                this.searchList(this.limit,val);
            },
            handleClick(val) {
                this.test(val);
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['70%','70%'], //宽高
                    close: true,
                    title: '配置首页模块',
                    shadeClose: true,
                    content: $('#config'),
                    end: () => {//关闭隐藏
                    }
                });
            },
            test:function(val){
                this.clickRow = val;//点击的那一行
                if (val.config_other==null||val.config_other==''){//为空，表示所有的都显示
                    this.clickRow.config_other = {
                        target:{
                            outBoundNumber:'',
                            outBoundTime:'',
                            signedMoney:''
                        },
                    }
                }
                if (val.config_souye==null||val.config_souye==''){//为空，表示所有的都显示
                    this.clickRow.config_souye = this.$configSouye;
                }else{
                    if(Object.keys(this.$configSouye).length>Object.keys(val.config_souye).length){
                        var temp = [];
                        for (var a in Object.keys(this.$configSouye)){
                            temp[Object.keys(this.$configSouye)[a]] = val.config_souye[Object.keys(this.$configSouye)[a]];
                        }
                        this.clickRow.config_souye = temp;
                    }
                }
            },
            configTarget(val) {//编辑配置
                this.test(val);
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['70%','70%'], //宽高
                    close: true,
                    title: '配置目标',
                    shadeClose: true,
                    content: $('#target'),
                    end: () => {//关闭隐藏
                    }
                });
            },
            save:function () {
                this.clickRow.config_souye = JSON.stringify(this.clickRow.config_souye)
                this.clickRow.config_other = JSON.stringify(this.clickRow.config_other)
                this.$post('basic-information-system-tj/save',{CrmSystemYgxx_:this.clickRow})
                    .then((response) => {
                        if (response.data.res == 1) {
                            this.$message({'message':'保存成功','type':'success'});
                        }else{//失败
                            this.$message({'message':'保存成功','type':'error'});
                        }
                    }).catch((response) => {
                    consoleLog(response)
                });
                this.clickRow.config_souye = JSON.parse(this.clickRow.config_souye)
                this.clickRow.config_other = JSON.parse(this.clickRow.config_other)
            },
            saveTarget:function (formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.clickRow.config_souye = JSON.stringify(this.clickRow.config_souye)
                        this.clickRow.config_other = JSON.stringify(this.clickRow.config_other)
                        this.$post('basic-information-system-tj/save',{CrmSystemYgxx_:this.clickRow})
                            .then((response) => {
                                if (response.data.res == 1) {
                                    this.$message({'message':'保存成功','type':'success'});
                                }else{//失败
                                    this.$message({'message':'保存成功','type':'error'});
                                }
                            }).catch((response) => {
                            consoleLog(response)
                        });
                        this.clickRow.config_souye = JSON.parse(this.clickRow.config_souye)
                        this.clickRow.config_other = JSON.parse(this.clickRow.config_other)
                    } else {
                        return false;
                    }
                });
            }
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>